
<script setup lang="ts">
import { ref } from 'vue'

const list = ref(['西瓜', '苹果', '鸭梨', '榴莲'])

const person = ref({
  name: 'jack',
  age: 18,
  friend: 'rose',
  food: '隆江猪脚饭',
})
</script>

<!-- 结构 -->
<template>
  <div id="app">
    <h3>小黑水果店</h3>
    <ul>
      <!-- <li v-for="(it, index) in list" :key="index">{{ it }} - {{ index + 1 }}</li> -->

      <!-- 下标用不上，可以省略不写 -->
      <!-- <li v-for="item in list" :key="item">
        {{ item }}
      </li> -->

      <!-- 循环对象
        第一项:属性值
        第二项:键 
      -->
      <!-- <li v-for="(item, key) in person" :key="item">{{ item }}--{{ key }}</li> -->

      <li v-for="item in 5" :key="item"><a href="#">0-0-|-0</a><button>我是按钮</button></li>
    </ul>
  </div>
</template>

<!-- 样式 -->
<style scoped>
</style>